<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    body {
        width:640px;
        margin:20px 30px;
    }

    #status {
        width:10px;
        height: 10px;
        border-radius: 50%;
        position: absolute;
        top:15px;
        left: 0;
        margin:10px;
        background: #999;
    }

    #status.working {
        -webkit-animation: flash 1s infinite;
        -webkit-animation-direction: alternate;
    }

    #msg {
        max-height: 300px;
        overflow: auto;
        border-radius: 5px;
        border:1px solid #ccc;
        margin:20px 0;
        padding: 5px 15px;
        background: #eee;
    }

    #msg li {
        margin:5px 20px;
    }

    @-webkit-keyframes  flash {
        from {
            box-shadow: 0 0 5px green;
            background: green;
        }

        to {
            box-shadow: 0 0 12px green;
            background: green;
        }
     }
</style>
<body>
<div id="status"></div>
<button id="switch">开启</button>
<button id="clean">清空</button>

<ol id="msg"></ol>


<script>
    var Btn = function () {
        this._switch = document.querySelector('#switch');
        this._clean  = document.querySelector('#clean');
        this._msg    = document.querySelector('#msg');
        this._status = document.querySelector('#status');
        this.es = null;

        this.init();
    };

    Btn.prototype.init = function () {
        var that = this;

        var _msg = that._msg;
        that._clean.addEventListener('click', function () {
            _msg.innerHTML = '';
        });

        that._switch.addEventListener('click', function () {
            if(this.innerText === '开启') {
                that.on();
            } else {
                that.off();
            }
        });

        that.on();
    };

    Btn.prototype.on = function () {
        var that = this;

        // 1. 声明EventSource
        that.es = new EventSource('/msg');
        // 2. 监听数据
        that.es.onmessage = function (e) {
            document.querySelector('#msg').innerHTML += '<li>'+ e.data +'</li>'
        };

        that._switch.innerText = '关掉';
        that._status.classList.add('working');
    };

    Btn.prototype.off = function () {
        this.es.close();

        this._switch.innerText = '开启';
        this._status.classList.remove('working');
    };

    new Btn();
</script>
</body>
</html>